<template>
    <div class="wrapper main_wrap" ref="main">
        <page_header :content="content"></page_header>


        <el-card class="manage_card" ref="clue_card">
            <div class="manage_search" ref="manage_search">
                <div class="manage_search_item">
                    <el-select size="medium" style="width: 100%" v-model="search.seqId" filterable placeholder="请选择门店"
                               ref="search"
                               @change="select_page()"
                               @hook:mounted="closeReadOnly('search')"
                               @visible-change="closeReadOnly('search')"
                    >
                        <el-option v-for="item in activity_list" :label="item.name" :value="item.seqId"
                                   :key="item.seqId"></el-option>
                    </el-select>
                </div>
                <div class="manage_search_item flexbettwen">
                    <el-date-picker
                        size="medium"
                        class="auto_search_time"
                        v-model="search.time_range"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        :editable="false"
                        @change="select_page()"
                    >
                    </el-date-picker>
                </div>
            </div>

            <div class="manage_list">

                <div class="manage" :style="'height:' + this.list_height + 'px'" v-if="data_length > 0" ref="clueUl">

                    <!-- 统计-->
                    <el-card>
                        <div class="title_tip">销售统计</div>
                        <ul class="info_wrap">
                            <li class="info_item">
                                <p>无归属</p>
                                <p></p>
                            </li>
                            <li class="info_item">
                                <p>直销</p>
                                <p></p>
                            </li>
                            <li class="info_item">
                                <p>转介绍</p>
                                <p></p>
                            </li>
                            <li class="info_item">
                                <p>转介绍率</p>
                                <p></p>
                            </li>
                        </ul>
                    </el-card>
                    <!-- 排名-->
                    <el-card>
                        <div class="rank 1st">
                            <img src="" />
                            <p>姓名</p>
                            <p>销售量</p>
                        </div>
                        <div class="rank 2nd">
                            <img src="" />
                            <p>姓名</p>
                            <p>销售量</p>
                        </div>
                        <div class="rank 3rd">
                            <img src="" />
                            <p>姓名</p>
                            <p>销售量</p>
                        </div>
                    </el-card>
                    <!-- 意向客户-->
<!--                    <ul v-infinite-scroll="load_next_page" :infinite-scroll-disabled="disabled"-->
<!--                        :infinite-scroll-distance="20">-->

<!--                        <li class="manage_li" v-for="(item,index) in table_list" :key="index">-->
<!--                            <div class="li_item solid">-->
<!--                                <b class="left_tip">意向订单</b>-->
<!--                                <div class="right_num"> {{item.ctimeStr}}</div>-->
<!--                            </div>-->
<!--                            <div class="li_item solid">-->
<!--                                <b class="left_tip">成交订单</b>-->
<!--                                <div class="right_num"> {{item.ctimeStr}}</div>-->
<!--                            </div>-->
<!--                            <div class="li_item solid">-->
<!--                                <b class="left_tip">退款订单</b>-->
<!--                                <div class="right_num"> {{item.ctimeStr}}</div>-->
<!--                            </div>-->
<!--                            <div class="li_item solid">-->
<!--                                <b class="left_tip">核销订单</b>-->
<!--                                <div class="right_num"> {{item.ctimeStr}}</div>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->

                </div>

                <div class="clue_empty" v-else>
                    <el-empty :image-size="100"></el-empty>
                </div>
            </div>

        </el-card>

    </div>
</template>

<script>
    import page_header from "../../components/page_header";
    import pagination from "../../components/pagination";
    import _router from "../../common/_router";
    import lib_clue_autoshow from "../../libs/clue/lib_clue_autoshow"
    import lib_channel from "../../libs/library/lib_channel";
    import lib_from from "../../libs/library/lib_from";
    import _request from "../../common/_request";
    import _config from "../../common/_config";
    import _time from "../../utils/_time";

    export default {
        components: {
            page_header,
            pagination
        },
        data() {

            return {

                content: '门店业绩',
                activity_list: [],//活动列表
                //分页
                data_length: 1, // 总条数
                table_list: [],
                current_page: 0, //当前页
                disabled: true,
                list_height: 0,

                search: {
                    seqId: "", //项目
                    time_range: [],
                    stime: "",
                    etime: "",
                }, //检索


                //权限
                loading: false,
            }
        },
        created() {
            this.calc_height()
            lib_clue_autoshow.activity_list(this.init_activity)
        },
        methods: {
            calc_height() {
                this.$nextTick(function () {
                    const card_height = this.$refs.main.clientHeight
                    const search_height = this.$refs.manage_search.offsetHeight
                    this.list_height = (card_height - 50 - search_height)
                })
            },

            init_activity(data) {
                this.activity_list = data
                this.search.seqId = data[0].seqId;
                this.load_next_page();
            },

            //搜索条件
            search_where() {
                //消费详情
                this.search.stime = this.search.time_range != null && this.search.time_range.hasOwnProperty(0)
                    ? _time._to_timestmap(this.search.time_range[0])
                    : null
                this.search.etime = this.search.time_range != null && this.search.time_range.hasOwnProperty(1)
                    ? _time._to_timestmap(this.search.time_range[1])
                    : null

                return this.search
            },

            //回调
            reflush_list(count, list) {
                // console.log(list.length)
                this.data_length = count
                list.forEach(it => {
                    it.ctimeStr = _time._to_date(it.ctime * 1000)
                    this.table_list.push(it)
                })
                this.disabled = false
                // this.table_list = list
            },

            //查询
            select_page() {
                //分页查询
                this.current_page = 0
                this.data_length = 1
                this.table_list = []
                this.load_next_page()
            },

            //加载下一页
            load_next_page() {
                if (this.current_page * _config.size >= this.data_length)
                    return

                if (!this.search.seqId) {
                    return
                }

                this.disabled = true
                this.current_page++
                lib_clue_autoshow.select(this.current_page, this.search_where, this.reflush_list);
            },

            //聚焦弹起键盘
            closeReadOnly(val) {
                this.$nextTick(() => {
                    const input = this.$refs[val].$el.querySelector('.el-input__inner')
                    input.removeAttribute('readonly')
                })
            }

        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/style/manage/user";
</style>
